import bridgeApi from '@/common/rayBridgeSDK.js';
import {
	getWxShareHref,
	resolveUrl
} from '@/common/utils.js';
export default {
	methods: {
		createCanvas(opt = {}) {
			if (!this.canvas.el) {
				this.canvas.el = document.createElement('canvas');
				this.canvas.el.style.position = 'fixed';
				this.canvas.el.style.top = '-10000px';
				this.$refs.canvasContainer.$el.appendChild(this.canvas.el);
			}
			this.canvas.el.width = opt.width || this.canvas.width;
			this.canvas.el.height = opt.height || this.canvas.height;
			return this.canvas.el.getContext('2d');
		},
		async share() {
			// #ifdef H5
			const {
				title
			} = this.attrs;
			bridgeApi.wxShare({
				title,
				imageUrl: await this.getSharePhoto(),
				shareUrl: getWxShareHref({
					go: -1
				})
			});
			this.showShare = false;
			// #endif
		},
		async getSharePhoto() {
			this.shareCardAdd();
			this.$refs.loading.show();
			const {
				attrs,
				canvas
			} = this;
			const info = await this.getImageInfo(attrs.imageUrl);
			if (info) {
				const ctx = this.createCanvas({
					width: 250,
					height: 200
				});
				ctx.clearRect(0, 0, canvas.width, canvas.height); //清空之前
				ctx.save();
				const wr = info.width / 250;
				const hr = info.height / 200;
				let width = 0,
					height = 0;
				if (wr > hr) {
					width = info.width / hr;
					height = 200;
				} else {
					width = 250;
					height = info.height / wr;
				}
				ctx.drawImage(info.image, 0, 0, info.width, info.height, 0, 0, width, height);
				ctx.restore();
				let dataURL = canvas.el.toDataURL('image/png', 0.6);
				const url = await this.base64ToUrl(dataURL);
				this.$refs.loading.close();
				return Promise.resolve(url);
			} else {
				this.$refs.loading.close();
				return Promise.resolve(attrs.imageUrl);
			}
		},
		getImageInfo(url) {
			return new Promise(resolve => {
				const image = new Image();
				image.setAttribute('crossOrigin', 'Anonymous');
				image.onload = function() {
					const {
						width,
						height
					} = image;
					resolve({
						image,
						width,
						height
					});
				};
				image.src = resolveUrl(url);
			});
		},
		drawDate(top) {
			const {
				ctx,
				attrs
			} = this;
			top += attrs.innerTB + 60; //60: 上边距
			const date = attrs.date;
			ctx.save();
			ctx.font = '48px din';
			this.drawText({
				text: date[0],
				left: attrs.innerLR,
				top: top,
				lineHeight: 48
			});
			ctx.restore();
			ctx.save();
			ctx.font = '22px din';
			this.drawText({
				text: date[1],
				left: attrs.innerLR + 44,
				top: top,
				lineHeight: 44
			});
			ctx.restore();
			ctx.save();
			ctx.font = '22px din';
			this.drawText({
				text: '.',
				left: attrs.innerLR + 76,
				top: top,
				lineHeight: 44
			});
			ctx.restore();
			ctx.save();
			ctx.font = '22px din';
			this.drawText({
				text: date[2],
				left: attrs.innerLR + 84,
				top,
				lineHeight: 44
			});
			ctx.restore();
			return top; //44:行高
		},
		saveToImage() {
			const {
				canvas
			} = this;
			// 把画布转化成临时文件
			this.tempFilePath = canvas.el.toDataURL('image/png', 1);
			this.$refs.loading.hide();
			this.shareButton = false;
		},
		downloadSharePhoto() {
			this.shareCardAdd();
			// 保存图片至相册
			this.$refs.loading.show('保存中');
			try {
				bridgeApi.sharePoster(this.tempFilePath).then(res => {
				// bridgeApi.savePhotoToAlbum(this.tempFilePath).then(res => {
					this.showShare = false;
					this.$refs.loading.hide();
					uni.showToast({
						title: res,
						duration: 2000,
						icon: 'none'
					});
				});
			} catch (e) {
				this.$refs.loading.hide();
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				});
			}
		}
	}
}
